<script setup lang='ts'>
import { Notification,CircleCheckFilled } from "@element-plus/icons-vue";
import { useAppConfigUserStore } from "@/stores"
import type {LayoutType} from "@/types/appConfigUser"
const globalStore = useAppConfigUserStore()
const {layoutConfig} = storeToRefs(globalStore)
// 切换布局方式
const changeLayout = (val: LayoutType) => {
	globalStore.setLayout(val);
};

// 监听布局变化，在 body 上添加相对应的 layout class
watch(
	() => layoutConfig.value.layout,
	() => {
		const body = document.body as HTMLElement;
		body.setAttribute("class", layoutConfig.value.layout);
	},
	{ immediate: true }
);
</script>

<template>
<div>
  	<el-divider class="divider" content-position="center">
			<el-icon><Notification /></el-icon>
			{{ $t("settings.appConfigDrawer.layoutConfig.pcLayout") }}
		</el-divider>
		<div class="layout-box">
			<el-tooltip effect="dark" content="经典" placement="top" :show-after="200">
				<div
					:class="['layout-item layout-classic',  layoutConfig.layout == 'classicLayout' ? 'is-active' : '']"
					@click="changeLayout('classicLayout')"
				>
					<div class="layout-dark"></div>
					<div class="layout-container">
						<div class="layout-light"></div>
						<div class="layout-content"></div>
					</div>
					<el-icon v-if="layoutConfig.layout == 'classicLayout'"><CircleCheckFilled /></el-icon>
				</div>
			</el-tooltip>
			<el-tooltip effect="dark" content="横向" placement="top" :show-after="200">
				<div
					:class="['layout-item layout-transverse', layoutConfig.layout == 'topMenuLayout' ? 'is-active' : '']"
					@click="changeLayout('topMenuLayout')"
				>
					<div class="layout-dark"></div>
					<div class="layout-content"></div>
					<el-icon v-if="layoutConfig.layout == 'topMenuLayout'"><CircleCheckFilled /></el-icon>
				</div>
			</el-tooltip>
		</div>
</div>
</template>

<style lang='scss' scoped>
.divider {
	margin-top: 15px;
	.el-icon {
		position: relative;
		top: 2px;
		right: 5px;
		font-size: 15px;
	}
}

.layout-box {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding: 10px 0 0;
	.layout-item {
		position: relative;
		box-sizing: border-box;
		width: 95px;
		height: 67px;
		padding: 6px;
		margin-bottom: 20px;
		cursor: pointer;
		border-radius: 5px;
		box-shadow: 0 0 5px 1px var(--el-border-color-lighter);
		transition: all 0.2s;
		.layout-dark {
			background-color: var(--el-color-primary);
			border-radius: 3px;
		}
		.layout-light {
			background-color: var(--el-color-primary-light-5);
			border-radius: 3px;
		}
		.layout-content {
			background-color: var(--el-color-primary-light-8);
			border: 1px dashed var(--el-color-primary);
			border-radius: 3px;
		}
		.el-icon {
			position: absolute;
			right: 10px;
			bottom: 10px;
			color: var(--el-color-primary);
			transition: all 0.2s;
		}
		&:hover {
			box-shadow: 0 0 5px 1px var(--el-border-color-darker);
		}
	}
	.is-active {
		box-shadow: 0 0 0 2px var(--el-color-primary) !important;
	}
	.layout-vertical {
		display: flex;
		justify-content: space-between;
		.layout-dark {
			width: 20%;
		}
		.layout-container {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 72%;
			.layout-light {
				height: 20%;
			}
			.layout-content {
				height: 67%;
			}
		}
	}
	.layout-classic {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.layout-dark {
			height: 22%;
		}
		.layout-container {
			display: flex;
			justify-content: space-between;
			height: 70%;
			.layout-light {
				width: 20%;
			}
			.layout-content {
				width: 70%;
			}
		}
	}
	.layout-transverse {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.layout-dark {
			height: 20%;
		}
		.layout-content {
			height: 67%;
		}
	}
	.layout-columns {
		display: flex;
		justify-content: space-between;
		.layout-dark {
			width: 14%;
		}
		.layout-light {
			width: 17%;
		}
		.layout-content {
			width: 55%;
		}
	}
}

</style>
